<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>千园千变，万班万课</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="assets/css/admin.css">
    <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div class="tpl-portlet-components">
    <div class="portlet-title">
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">表单</a></li>
            <li class="am-active">Amaze UI 表单</li>
        </ol>
    </div>
    <div class="tpl-block ">
        <div class="tpl-block">
            <div class="am-tabs-bd">
                <!--传输提示框-->
                <div class="am-g error-log" id="logPanel" style="display: none">
                    <div class="am-u-sm-12 am-u-sm-centered">
                        <pre class="am-pre-scrollable" style="padding-left: 40px;">
                          <!--  <br><span class="am-text-danger">[错误提示]</span> 请选择要上传的文件
                            <br><span class="am-text-danger">[错误提示]</span> 请选择要上传的文件
                            <br><span class="am-text-danger">[错误提示]</span> 请选择要上传的文件-->
                            <!--<span class="am-text-success">传送成功</span>-->
                        </pre>
                    </div>
                </div>
                <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                    <form class="am-form">
                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-4 am-text-right"></div>
                            <div class="am-u-sm-4 am-u-md-5 am-text-right" style="width: 30%;">一键导入表格</div>
                            <div class="am-u-sm-8 am-u-md-3" style="width: 250px;">
                                <div class="am-form-group am-form-file">
                                    <button type="button" class="am-btn am-btn-default am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i> 选择要上传的Excel表格
                                    </button>
                                    <input type="file">
                                </div>
                            </div>
                            <div class="am-u-md-4 show_data" style="float: left;"></div>
                        </div>
                        <div style="margin-top: 20px">
                            <button class="am-btn  am-btn-success" style="margin-left: 31.6%;" id="submitBtn">确定
                            </button>
                        </div>
                    </form>
                    <div class="import_tips_content">
                        <p>请上传示例模板格式的excel文件，<a id="linkBtn" target="_blank" style="color: #008bd5;">下载示例模板</a>。</p>
                        <p>注意事项：</p>
                        <p>1、请下载示例模板，在模板基础上录入数据再上传。</p>
                        <p>2、请使用标准Microsoft Excel打开下载的模板数据，请勿使用wps等进行操作。</p>
                        <p>3、注意删除模板里的示例数据。</p>
                        <p>4、“班级名称”要跟在平台录入的班级名称确保一致。</p>
                        <p>5、如上传失败，请使用Microsoft Excel打开后重新保存上传。</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="tpl-alert"></div>
    </div>

</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/layer.js"></script>
<script src="assets/js/jquery.cookie.js"></script>
<script src="assets/js/md5.min.js"></script>
<script src="assets/js/verification.js"></script>
<script src="assets/js/request.js"></script>
<script src="assets/js/jquery.pagination.js"></script>
<script src="assets/js/jquery.serializejson.min.js"></script>
<script src="assets/js/jquery.params.js"></script>
<script src="assets/js/app.js"></script>
<script>
$('#linkBtn').attr('href', baseUrl + '/static/template/improve_curriculum_template.xls')
//文件上传
var formData = new FormData();
$('[type="file"]').on('change', function (e) {//当chooseImage的值改变时，执行此函数
  var file = this.files[0];
  var _this = this;
  var filePath = $(this).val(), //获取到input的value，里面是文件的路径
    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
  //判断文件大小
  const fileSizeLt4 = file.size / 1024 / 1024 > 4;
  if (fileSizeLt4) {
    layer.msg('文件大小不能大于4M', {icon: 2});
    return false;
  }
  // 检查是否是excel
  if (!fileFormat.match(/.xls/)) {
    layer.msg('上传错误,文件格式必须为.xls结尾的excel文件', {icon: 2});
    return false;
  } else {
    formData.append('file_excel', file); // 固定格式
    $(_this).val('')
    $('.show_data').html(filePath)
  }
});
//提交表单
$('#submitBtn').click(function (e) {
  e.preventDefault()
  var $btn = $(this)
  if (!formData.get('file_excel')) {
    layer.msg('请选择上传的文件', {icon: 2});
    return false
  }
  if (Verification()) {
    $btn.button('loading');
    AjaxRequest({
      url: '/admin/excel_import/',
      data: formData,
      contentType: false,
      processData: false,
      succFun: function (res) {
        $btn.button('reset');
        var data = res.data
        $('#logPanel').show()
        var logHtml = `<span class="am-text-success">[导入摘要]</span> 共${data.success + data.fail}条数据，成功导入${data.success}条，上传失败${data.fail}条`
        res.data.msg.forEach(function (d) {
          logHtml += '<br><span class="am-text-danger">[错误提示]</span> ' + d
        })
        $('#logPanel pre').html(logHtml)
        $('.show_data').html('')
      },
      complete: function () {
        $btn.button('reset');
        formData = new FormData();
      }
    })
  }
})
</script>
</body>
</html>